<template>
  <!-- 侧边栏 -->
  <div class="sidebar" :class="showSide ? 'hover' : ''">
    <div class="box dh">
      <div class="panel">
        <div class="head">
          <b>
            <img :src="userInfo.avatar" />
          </b>
          <h1>{{ userInfo.name }}</h1>
          <h2>{{ userInfo.groupName }}/</h2>
        </div>
        <div class="side-scroller">
          <scroller lock-x height="100%">
            <div class="route-content">
              <div class="nav" v-for="(item, index) in routerList" :key="index">
                <h1>{{ item.title }}</h1>
                <a
                  v-for="(route, routeIndex) in item.items"
                  @click="routerGoTo(route.route, route.name)"
                  :class="activeRouteName == route.name ? 'active-route' : ''"
                  ><span
                    ><i class="fa" :class="route.icon" aria-hidden="true"></i
                  ></span>
                  <h2>{{ route.name }}</h2>
                </a>
              </div>
            </div>
          </scroller>
        </div>
      </div>
      <div class="buttom">
        <b data-id="true" @click="showSide = !showSide"
          ><em
            ><i
              class="fa"
              :class="showSide ? 'fa-angle-left' : 'fa-angle-right'"
              aria-hidden="true"
            ></i
          ></em>
        </b>
      </div>
    </div>
    <p class="dh"></p>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Scroller } from "vux";
export default {
  components: { Scroller },
  data() {
    return {
      showSide: false,
      activeRouteName: "填写申请",
      routerList:[]
    };
  },
  watch: {
    $route(to, from) {
      this.showSide = false;
    },
    routeList(val) {
      if (val) {
        console.log(65,val)
        this.routerList = JSON.parse(JSON.stringify(val));
      }
    },
  },
  methods: {
    routerGoTo(path, name) {
      this.activeRouteName = name;
      // if (this.$route.path == "/waitApproveList") {
      //   this.$router.push({
      //     query: {
      //       type: name == "待我审批" ? 1 : 2,
      //     },
      //   });
      // }
      if (this.$route.path != path) {
        this.$router.push(path);
      }
      this.showSide = false;
    },
    inintRoute() {
      for (let i in this.routerList) {
        for (let j in this.routerList[i].items) {
          if (this.routerList[i].items[j].route == this.$route.path) {
            // if (
            //   this.$route.path == "/waitApproveList" &&
            //   this.$route.query.type == 1
            // ) {
            //   this.activeRouteName = "待我审批";
            // } else if (
            //   this.$route.path == "/waitApproveList" &&
            //   this.$route.query.type == 2
            // ) {
            //   this.activeRouteName = "我已审批";
            // } else {
              this.activeRouteName = this.routerList[i].items[j].name;
            // }
          }
        }
      }
    },
  },
  mounted() {
    this.routerList = this.routeList
    this.inintRoute();
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      routeList: (state) => state.routes.routeList,
    }),
    // routerList() {
    //   if (this.routeList.length > 0) {
    //     return this.routeList;
    //   } else {
    //     let route = [
    //       {
    //         title: "出差请休假申请",
    //         items: [
    //           {
    //             route: "/applyIndex",
    //             name: "填写申请",
    //             icon: "fa-twitter",
    //           },
    //           {
    //             route: "/myApplyList",
    //             name: "我的申请",
    //             icon: "fa-file-text-o",
    //           },
    //           {
    //             route: "/entryTime",
    //             name: "入职时间修正",
    //             icon: "fa-calendar",
    //           },
    //         ],
    //       },
    //       {
    //         title: "我的审批",
    //         items: [
    //           {
    //             route: "/waitApproveList",
    //             name: "待我审批",
    //             icon: "fa-envelope-o",
    //           },
    //           {
    //             route: "/waitApproveList",
    //             name: "我已审批",
    //             icon: "fa-pencil-square-o",
    //           },
    //         ],
    //       },
    //       {
    //         title: "出差请休假申请单",
    //         items: [
    //           {
    //             route: "/documentIndex",
    //             name: "查看单据",
    //             icon: "fa-eye",
    //           },
    //           {
    //             route: "/standardTable",
    //             name: "出差管理办法 | 住宿标准",
    //             icon: "fa-rss",
    //           },
    //         ],
    //       },
    //       {
    //         title: "短信",
    //         items: [
    //           {
    //             route: "/messageSend",
    //             name: "短信发送",
    //             icon: "fa-send",
    //           },
    //           {
    //             route: "/messageHistory",
    //             name: "短信发送记录",
    //             icon: "fa-history",
    //           },
    //         ],
    //       },
    //       {
    //         title: "会议计划",
    //         items: [
    //           {
    //             route: "/meetingPlan",
    //             name: "填写会议计划",
    //             icon: "fa-list-alt",
    //           },
    //           {
    //             route: "/meetingPublish",
    //             name: "我发布的",
    //             icon: "fa-arrow-up",
    //           },
    //         ],
    //       },
    //       {
    //         title: "我的会议",
    //         items: [
    //           {
    //             route: "/meetingJoin",
    //             name: "待参加",
    //             icon: "fa-users",
    //           },
    //           {
    //             route: "/meetingOver",
    //             name: "已结束",
    //             icon: "fa-info-circle",
    //           },
    //         ],
    //       },
    //     ];
    //     return route
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/side-bar.css";
.hide-side {
  width: 0;
}
.active-route {
  background: #4697bb;
}
.side-scroller {
  height: calc(~"100vh - 65px");
}
.route-content {
  padding-bottom: 20px;
}
</style>